<template>
    <div class="login-page">

      <div class="login">
        <div class="login-title">
          <img src="/static/img/jj.png" style="height: 38px">
        </div>

        <div class="login-form">
          <div class="label">用户登录</div>
          <div class="form">
            <div class="ref">
            <div class="input">
              <input type="text" v-model="loginForm.username" placeholder="请输入用户名" @keyup.enter="login"/>
            </div>
            </div>
            <div class="ref">
            <div class="input">
              <input type="password" v-model="loginForm.password" placeholder="请输入密码" @keyup.enter="login"/>
            </div>
            </div>
            <div class="ref">
            <button class="loginButton" @click="login" style="height: 40px">登录</button>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        data(){
          return{
            loginForm:{
              username:'',
              password:''
            },

          }
        },
        methods:{
          login () {
            let that = this
            let params = {
              'username': this.loginForm.username,
              'password': this.loginForm.password
            };

            this.$store.dispatch('Login', params).then(function (res) {
              if(res.state==200) {
                that.$router.push({path: '/'})
              }else{
                that.$message({
                  message: '用户名或密码不正确',
                  type: 'warning',
                  offset:'150'
                });
              }
            })
          },
          reset(){
            this.loginForm.username = ''
            this.loginForm.password = ''
          }
        }
    }
</script>

<style scoped="scoped">
.login-page{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url(/static/img/bj.png) no-repeat;
  background-size:100% 100%;
}
.login-title,.login-title-fu{
  margin: 0;
  padding: 0;
  width: 100%;
  text-align: center;
}
.login{
  margin: 0 auto;
  width: 600px;
  height: 500px;
  position: relative;
  top: 50%; /*偏移*/
  margin-top: -240px;
  padding: 30px;
  /*border: #1c7cd5 1px solid;*/
  border-radius:5px;
  /*background: url("/static/img/form-bj.png") no-repeat center 25%;*/

}

.login-form{
  margin: 0 auto;
  width: 290px;
  height: 280px;
  position: relative;
  top: 25%; /*偏移*/
  margin-top: -100px;
  padding: 60px 40px;
  border: #1c7cd5 1px solid;
  border-radius:5px;
  background-color: #e8f1fd;
}

.login .label{
  display: block;
  margin: 0 auto;
  width: 200px;
  text-align: center;
  padding-bottom: 19px;
  font-weight: 700;
  font-size: 24px;
  letter-spacing:2px;
  font-family: "Microsoft YaHei", "微软雅黑","Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",  Arial, sans-serif;
  -webkit-user-select: none;  /* 禁止 DIV 中的文本被鼠标选中 */
  -moz-user-select: none;     /* 禁止 DIV 中的文本被鼠标选中 */
  -ms-user-select: none;      /* 禁止 DIV 中的文本被鼠标选中 */
  user-select: none;             /* 禁止 DIV 中的文本被鼠标选中 */
  color: #0f7dd1;
}
.login .form{
  display:inline;
  width: 280px;
  text-align: center;

}
.login .form .ref{
  width: 280px;
  height: 50px;
  margin-left: 10px;
  margin-top: 5px;
  float: left;
  padding-top: 25px;
  text-align: center;
}

.loginButton{
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #0f7dd1;
  border: 1px solid #DCDFE6;
  color: #fff;
  -webkit-appearance: none;
  text-align: center;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  -webkit-transition: .1s;
  transition: .1s;
  font-size: 16px;
  letter-spacing:2px;
  font-weight: 600;
  padding: 6px 20px;
  border-radius: 4px;
  width: 260px;
}
.input input {
  width: 200px;
  height: 32px;
  padding: 2px 4px 2px 44px;/*设置input内边距*/
  color: #0f7dd1;
  border: #0f7dd1 1px solid;
  border-radius: 4px;
  background-color: #e8f1fd;
}

.input input[type="text"]{
  background-image: url(/static/img/user-icon.png);/*设置小图标*/
  background-size: 30px 26px;/*小图标的大小*/
  background-position: 5px 4px;/*小图标在input的位置*/
  background-repeat: no-repeat;/*背景小图标不重复*/
}

.input input[type="password"]{
  background-image: url(/static/img/pwd-icon.png);/*设置小图标*/
  background-size: 30px 26px;/*小图标的大小*/
  background-position: 5px 4px;/*小图标在input的位置*/
  background-repeat: no-repeat;/*背景小图标不重复*/
}

::-webkit-input-placeholder{/*Webkit browsers*/
  color: #80d4fa;
  font-size:14px;
  font-weight: 600;
}
:-moz-placeholder{/*Mozilla Firefox 4 to 8*/
  color:#80d4fa;
  font-size:14px;
  font-weight: 600;
}
::moz-placeholder{/*Mozilla Firefox 19+*/
  color:#80d4fa;
  font-size:14px;
  font-weight: 600;
}
:-ms-input-placeholder{/*Internet Explorer 10+*/
  color:#80d4fa;
  font-size:14px;
  font-weight: 600;
}

</style>
